<template>
	<el-select placeholder="请选择/Please Choose" v-model="selectedId" style="width:200px" multiple collapse-tags @change="handleChange">
        <el-option v-for="(item, index) in items" :key="index" :value="item.sz" :label="item.mc">{{ item.mc }}</el-option>
    </el-select>
</template>
<script lang="ts">
import { defineComponent ,onMounted,reactive, ref, toRefs} from 'vue'
import request from '/@/utils/request'

export default defineComponent ({
    name: 'DictMulitSelect',
    emits: ['dictMulitSelected'],
    props: {
        lxid: Number,
        selectedId: Array
    },
    setup(props, context) {
        const state = reactive({
            loading: false,
            items:[],
            value : ''
        })
        const loadData = ()=>{
            state.loading = true
			request.get('/system/dict/items/'+props.lxid).then(res => {
				state.items = res?.data || []
 			}).finally(()=>{
				state.loading = false
			})
        }
       const selectRef = ref();
        onMounted(()=>{
            loadData();
        })

        const handleChange = (data:any)=>{
            context.emit("dictMulitSelected", data);
        }

        return {
            ...toRefs(state),
            ...toRefs(props),
            selectRef,
            handleChange,
        }
    }
})
</script>
